<template>

  <el-card>

    <!--头部-->
    <div style="min-height: 220px; margin-bottom: 5px">
      <el-row>
        <el-col :span="24">

          <div class="box-content" >

            <!-- 图片 + 文字的 flex 容器 -->
            <div class="" style="display: flex; gap: 10px; align-items: flex-start;">
              <!--图片-->
              <div>
                <el-image class="siteIco" fit="contain" :src="site.icoUrl || require('@/assets/images/ico/site.png')" />
              </div>

              <!--图片左边的文字-->
              <div class="site-content">

                <div style="display: flex; gap: 10px; align-items: center; min-width: 500px">
                  <h2>{{ site.name }}</h2>
                  <el-tag size="mini" v-if="site.secrecy === 1" type="danger">保密单位</el-tag>
                  <el-tag size="mini" v-else-if="site.secrecy === 0">非保密单位</el-tag>
                </div>

                <el-row>
                  <el-col :span="3">负责人：</el-col>
                  <el-col :span="21">
                    <span>{{ site.leaderName }}</span>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 5px">
                  <el-col :span="3">阶段：</el-col>
                  <el-col :span="21">
                    <el-tag size="mini" type="info" v-if="site.stage === 1">启动阶段</el-tag>
                    <el-tag size="mini" type="danger" v-else-if="site.stage === 2">招投标阶段</el-tag>
                    <el-tag size="mini" type="warning" v-else-if="site.stage === 3">开发阶段</el-tag>
                    <el-tag size="mini" v-else-if="site.stage === 4">实施部署阶段</el-tag>
                    <el-tag size="mini" type="success" v-else-if="site.stage === 9">运维阶段</el-tag>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 5px">
                  <el-col :span="3">重要性：</el-col>
                  <el-col :span="21">
                    <el-rate v-model="site.importance" disabled text-color="#ff9900"></el-rate>
                  </el-col>
                </el-row>
              </div>

              <!--操作按钮-->
              <!--<div style="margin-left: auto; display: flex; gap: 10px;">-->
              <!--  <el-button @click="openUpdBefore(site)" type="warning" :size="layoutCss.size">编辑</el-button>-->
              <!--  <el-button @click="delTips(site)" type="danger" :size="layoutCss.size">删除</el-button>-->
              <!--</div>-->

            </div>


            <p style="margin-top: 10px; margin-bottom: 10px;">详情：</p>
            <p class="description">{{ site.description }}</p>
          </div>

        </el-col>
      </el-row>

      <!--分割线-->
      <el-divider></el-divider>
    </div>



    <!--下面部分-->
    <el-tabs v-model="elTab.activeName" type="card" @tab-click="handleTabClick">

      <el-tab-pane label="基础信息" name="home">

        <!--中间部分-->
        <el-row :gutter="10">

          <!--中间左边-->
          <el-col :span="14">
            <div class="icon-container">
              <div class="icon" style="background-color: #F0F5F0" @click="openComputerBefore"><i class="elementui-tag el-icon-monitor"/> 计算机管理({{site.computerNum}})</div>
              <div class="icon" style="background-color: #FAF4ED" @click="openNetEnvBefore"><i class="elementui-tag el-icon-menu"/> 网络环境(1)</div>
              <!--<div class="icon" style="background-color: #F0F0F6"><i class="elementui-tag el-icon-user"/> 现场人员管理(21)</div>-->
              <!--<div class="icon" style="background-color: #F6EFF4"><i class="elementui-tag el-icon-s-custom"/> 干系人管理(22)</div>-->
              <div class="icon" style="background-color: #EFF3F9"><i class="elementui-tag el-icon-question"/> 故障上报(0)</div>
              <div class="icon" style="background-color: #E5F2FD"><i class="elementui-tag el-icon-view"/> 自动巡检(0)</div>
              <!--<div class="icon" style="background-color: #E9F5E9"><i class="elementui-tag el-icon-files"/> 应用集群(21)</div>-->
              <!--<div class="icon" style="background-color: #FEF3E0"><i class="elementui-tag el-icon-collection"/> 组件管理(23)</div>-->
              <!--<div class="icon" style="background-color: #FDEBEE"><i class="elementui-tag el-icon-office-building"/> 厂商(3)</div>-->
              <div class="icon" style="background-color: #F2E5F5"><i class="elementui-tag el-icon-stopwatch"/> 现场计划(0)</div>
              <div class="icon" style="background-color: #EFF9FA"><i class="elementui-tag el-icon-copy-document"/> 升级计划(0)</div>
            </div>
          </el-col>


          <!--中间右边，文件树-->
          <el-col :span="10">
            <OpsCommonUseList ref="OpsCommonUseListRef" bind-type="site" :bind-id="this.$route.query.siteId"/>
          </el-col>

        </el-row>

      </el-tab-pane>


      <el-tab-pane label="环境管理" name="env">
        <OpsEnvList/>
      </el-tab-pane>

      <el-tab-pane label="环境账号" name="envAccount">
        <OpsEnvAccountList/>
      </el-tab-pane>

      <el-tab-pane label="第三方厂商人员" name="thirdPartySiteUser">
        <OpsThirdPartySiteUserList/>
      </el-tab-pane>

      <el-tab-pane label="进度时间轴" name="timeLine">
        <OpsSiteTimeLineList/>
      </el-tab-pane>

      <el-tab-pane label="干系人管理" name="stakeholder">
        <OpsStakeholderList/>
      </el-tab-pane>


    </el-tabs>





  </el-card>


</template>

<script>


import http from '@/utils/http'
import OpsSiteSaveUpd from './OpsSiteSaveUpd'
import OpsCommonUseList from '../common/OpsCommonUseList'
import ComputerServerDetailed from "./ComputerServerDetailed.vue";
import OpsComputerFileList from "./OpsComputerFileList.vue";
import OpsEnvList from "./OpsEnvList.vue";
import OpsThirdPartySiteUserList from "../thirdParty/OpsThirdPartySiteUserList.vue";
import OpsSiteTimeLineList from "@/components/site/OpsSiteTimeLineList.vue";
import OpsStakeholderList from "@/components/site/OpsStakeholderList.vue";
import OpsEnvAccountList from "@/components/site/OpsEnvAccountList.vue";

export default {
  components: {
    OpsComputerFileList,
    ComputerServerDetailed,
    OpsSiteSaveUpd,
    OpsCommonUseList,
    OpsEnvList,
    OpsThirdPartySiteUserList,
    OpsSiteTimeLineList,
    OpsStakeholderList,
    OpsEnvAccountList,
  },
  data() {
    return {
      layoutCss :{
        size: 'mini',
      },
      // 查询出的场所信息
      site: {},
      siteStatistical: {
        // 场所人员
        siteUserNum: 0,
        // 计算机数量
        computerNum: 0,
        // 部署项目数量
        projectNum: 0,
        // 故障数量
        faultNum: 0,
      },
      // 标签页信息
      elTab:{
        // 被选中的标签
        activeName: 'home',
      },
    };
  },
  methods: {
    /**
     * 标签页被点击的时候
     * @param tab
     * @param event
     */
    handleTabClick(tab, event){
      console.log(this.elTab.activeName)
    },
    /**
     * 打开计算机之前
     */
    openComputerBefore() {
      // this.$refs.ComputerServerListRef.openComputerServerListBefore()
      this.$router.push({path: '/toComputerServerList', query: {siteId: this.site.id}})
    },
    /**
     * 打开环境之前
     */
    openNetEnvBefore(){
      this.$router.push({path: '/toNetEnvList', query: {siteId: this.site.id}})
    },
    /**
     * 根据主键查询场所信息
     */
    getSiteById() {
      http.post("/opsSite/getSiteById", {
        siteId: this.$route.query.siteId,
      }).then(response => {
        let res = response.data;
        this.site = res.data
        this.getImageUrlInfo(this.site)

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 场所信息统计
     */
    getStatisticalVenueData() {
      http.post("/opsSite/getStatisticalVenueData", {
        siteId: this.$route.query.siteId,
      }).then(response => {
        let res = response.data;
        this.siteStatistical = res.data

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 渲染图片
     * 只能这样做，图片这里不支持非固定地址返回
     * @param item
     */
    getImageUrlInfo(item) {
      if (!item || !item.ico || item.ico === 'null') {
        // 判空或无效，直接显示默认图
        this.$set(item, 'icoUrl', null);
        return;
      }

      http.getImageUrl(item.ico)
        .then(url => {
          // 异步赋值，触发响应式更新
          this.$set(item, 'icoUrl', url);
        })
        .catch(() => {
          // 下载失败 fallback 默认图
          this.$set(item, 'icoUrl', null);
        });
    },
  },
  // 为了解决this.$router.push()跳转路由，跳转后mounted不再调用的问题
  // watch:{
  //   $route: {
  //     handler(to, from) {
  //       // to: 新路由对象
  //       // from: 旧路由对象
  //       console.log('路由变化', to.query.siteId)
  //       if (to.query.siteId) {
  //         this.getSiteById(to.query.siteId)
  //       }
  //     },
  //     // 立即执行一次
  //     immediate: true
  //   }
  // },
  // beforeRouteEnter(to, from, next) {
  //   next(vm =>{
  //     vm.$nextTick(() => {
  //       console.log(111111111111111111)
  //       vm.getSiteById();
  //     })
  //   })
  // },
  mounted() {
    this.getSiteById()
    // this.getStatisticalVenueData()
    this.$store.commit('navigationListChange', [
      {name: '场所列表', url: '/toSiteList', query: {}},
      {name: '场所详情', url: '/toSiteLayout', query: {siteId: this.$route.query.siteId}},
    ])
  },

}
</script>




<style>

</style>





<style scoped>





.siteIco {
  width: 126px;
  height: 110px;
}



.box-content .description {
  margin-top: 0px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical;
  cursor: pointer;
}



/*
 中间部分的应用div start =========================
 */

.icon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 从左到右排列 */
  gap: 10px; /* 图标之间的间距 */
  max-width: 1200px; /* 最大宽度，根据需求调整 */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.icon {
  flex: 0 1 auto; /* 根据内容宽度动态调整 */
  min-width: 200px; /* 最小宽度 */
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*color: #fff;*/ /* 文字颜色 */
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  margin: 3px;
  cursor: pointer;
}


/*
 中间部分的应用div end =========================
 */


.elementui-tag {
  font-size: 18px;
  margin-right: 5px;
}




</style>
